<?php if (!isset($_SESSION)) session_start(); ?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

<title>Koreanet</title>

<!-- Nanum Webfont -->
<style>
* {
	font-family: 'NanumGothic' !important;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
 google.load( "webfont", "1" );
 google.setOnLoadCallback(function() {
  WebFont.load({ custom: {
   families: [ "NanumGothic" ],
   urls: [ "http://fontface.kr/NanumGothic/css" ]
  }});
 });
</script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>

<!-- Bootstrap core CSS -->
<link href="./dist/css/bootstrap.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="./css/payslip.css" rel="stylesheet">
<link rel="stylesheet"
	href="./lib/datetimepicker/bootstrap-datetimepicker.min.css" />
	
</head>

<body>
<?php include 'header.php';?>
<?php require_once './class/MonthlyReport.inc';?>

	<div class="container container_bottom">
		<div class="row">
			<div class="col-md-12">
				<h2><?php //echo date('Y')."년".date('m')."월";?> 운송료 지급 명세서</h2>
			</div>
		</div>
		<div class="row row_margin">
			<div class="col-md-6">
				<div class='input-group date' id='picker1'>
					<span class="input-group-addon">조회일</span> <input id='search_date'
						name='search_date' type='text' class='form-control'
						placeholder='달력 버튼을 누르세요.' data-format='YYYY/MM/DD'
						readonly='readonly' value='<?php echo date("Y/m/d")?>' /> <span
						class='input-group-addon input-group-addon-end add-last'>
						<button class='btn btn-default btn-calendar'>달력</button>
					</span>
				</div>
			</div>
		</div>
		<br><br>
		<div class="table-responsive">
			<table class="table table-bordered" id="pay_table">
				
			</table>
		</div>
	</div>
	<!-- /container -->
	
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="./dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="./lib/moment/moment.js"></script>
	<script type="text/javascript" src="./lib/moment/transition.js"></script>
	<script type="text/javascript" src="./lib/moment/collapse.js"></script>
	<script type="text/javascript"
		src="./lib/datetimepicker/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript">
	var reVal;
	function requestTableData() {
		reVal = getXMLRequestObject();
		reVal.onreadystatechange = onChange;
		var date = document.getElementById("search_date");
		var id = "<?php echo $_GET ['id'];?>";
		var params = "id="+id+"&date="+date.value;
		reVal.open("POST", "./ajax/payslip_table.php", true);
		reVal.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		reVal.send(params);
	}

	function getXMLRequestObject() {
		var xmlreq = false;
		if (window.XMLHttpRequest) { //파이어폭스나 맥의 사파리의 경우처리 
			xmlreq = new XMLHttpRequest();
		} else if (window.ActiveXObject) { //IE계열의 브라우져의 경우
			try {
				xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e1) {
				// Failed to create required ActiveXObject
				try {
					// Try version supported by older versions
					// of Internet Explorer
					xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e2) {
					// Unable to create an XMLHttpRequest with ActiveX
				}
			}
		}
		return xmlreq;
	}

	function onChange() {
		// only if req shows "loaded"
		if (reVal.readyState == 4) {
			// only if "OK"
			if (reVal.status == 200) {
				document.getElementById("pay_table").innerHTML = reVal.responseText;
			} else {
				alert("There was a problem retrieving the XML data:\n" + reVal.statusText);
			}
		}
	}

	$(window).load(function () {
		$('#picker1').datetimepicker({
			pickTime: false
		});
		$("#picker1").on("change.dp",function (e) {
			requestTableData();
         });

		requestTableData();
	});
	</script>
</body>
</html>